<template>
<div>
    <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="id" label="id" width="180"></el-table-column>
        <el-table-column prop="shopName" label="用户名" width="180"></el-table-column>
        <el-table-column prop="shopDescription" label="描述"></el-table-column>
        <el-table-column prop="shopImage" label="图片" width="180">
            <template #default="scope">
                <img :src="scope.row.shopImage" alt="" style="width: 100px; height: 100px"/>
            </template>
        </el-table-column>
         <el-table-column  label="操作" width="180">
            <template #default="scope">
                <el-button type="primary" @click="handleEdit(scope.row)">编辑</el-button>
                <el-button type="danger" @click="handleDelete(scope.row)">删除</el-button>
            </template>
         </el-table-column>
    </el-table>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import axios from 'axios';
const tableData = ref([])
const getList=async()=>{
    const res=await axios.get('/api/list',{

    })
    const {data}=res.data.data;
    tableData.value=data;
}
//删除
const handleDelete=async(id:string)=>{
    await axios.delete('/api/list/?id='+id)
    await getList()
}
getList()
</script>